import { Image, View } from "@tarojs/components"
import React, { Component } from "react"
import { AtAvatar, AtBadge, AtIcon, AtTabs, AtTabsPane } from 'taro-ui'
import Taro, { connectSocket } from "@tarojs/taro"
import { connect } from 'react-redux'
import './IndexHeader.scss'
import logo from '../../images/logo.png'

class IndexHeader extends Component{

  toMessage () {
    Taro.navigateTo({
      url: '/pages/message/message'
    })
  }

  render () {
    return (
      <View className='index-header-container'>
        <View className='at-row'>
          <View className='at-col at-col-2 display-flex justify-center align-center'>
            <Image
              className='index-logo-img circle'
              mode='aspectFit'
              src={this.props.user.userInfo.avatarUrl||'http://storage.360buyimg.com/mtd/home/32443566_635798770100444_2113947400891531264_n1533825816008.jpg'}
            >

            </Image>
            {/* <AtAvatar className='index-logo-img' size='small' circle image='http://storage.360buyimg.com/mtd/home/32443566_635798770100444_2113947400891531264_n1533825816008.jpg'></AtAvatar> */}
          </View>
          <View className='at-col at-col-8 index-logo'>
            {/* 爱骑出行 */}
            <Image
              mode='aspectFit'
              src={logo}
              style='height: 2rem; width: 50%;'
            >

            </Image>
          </View>
          <View className='at-col at-col-2 display-flex justify-center align-center'>
          <AtBadge dot>
            <AtIcon
              className='index-logo-img'
              value='message'
              size='24'
              onClick={this.toMessage.bind(this)}
            >

            </AtIcon>
          </AtBadge>
          </View>
        </View>
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user.user
  }
}

export default connect(mapStateToProps)(IndexHeader)